<template>
	<w-collapse v-model="collapseVisible" contentHeight="300px" :fullScreen="fullScreen" disabled :showArrow="false" title="工序消耗品">
		<fx-detials-table
			ref="procedureUseTable"
			:disabled="disabled"
			:tableColumn="tableColumn"
			:tableValiDate="tableValiDate"
			:tableData="useDetails"
			:tableEditColumnProp="tableEditColumnProp"
			:mainId="procedureDetails.id"
      :fpSaveMain="fSaveMain"
			:fpInitAddDetailsData="fpInitAddDetailsData"
			:fpSaveDetails="fpSaveDetails"
			:fpDeleteDetails="fpDeleteDetails"
			@on-details-refresh="onDetailsRefresh"
			:searchProps="['code', 'materialName']"
		>
		</fx-detials-table>
	</w-collapse>
</template>
<script>
const EDIT_INPUT_TYPE = ['code', 'unit', 'useTotal']
export default {
	name: 'procedureUseTable',
	props: {
		fullScreen: Boolean,
		procedureDetails: {
			type: Object,
			default: () => {
				return {}
			}
		},
		useDetails: {
			type: Array,
			default: () => {
				return []
			}
		},
		itemList: {
			type: Array,
			default: () => {
				return []
			}
		},
		fSaveMain: Function,
		disabled: Boolean
	},
	data () {
		return {
			collapseVisible: true,
			tableColumn: [
				{
					prop: 'code',
					label: '消耗品编号',
					width: '150px',
					required: true,
					fxRender: this.codeRender,
					click: this.onCellClick('code')
				},
				{ prop: 'materialName', label: '消耗品名称' },
				{
					prop: 'processingFlag',
					label: '物料类型',
					width: '150px',
					required: true,
					formatter: this.processingFlagRender
				},
				{
					prop: 'unit',
					label: '单位',
					fxRender: this.unitRender,
					click: this.onCellClick('unit')
				},
				{
					prop: 'useTotal',
					label: '用量',
					fxRender: this.useTotalRender,
					click: this.onCellClick('useTotal')
				},
				{ prop: 'rate', label: '标准出成率%' }
			],
			tableEditColumnProp: EDIT_INPUT_TYPE,
			tableValiDate: [{
				columnProp: 'code',
				rule: this.checkCode
			}, {
				columnProp: 'unit',
				rule (row, success, error) {
					if (!row.itemUnit.id) {
						error('单位不能为空')
					} else {
						success()
					}
				}
			}, {
				columnProp: 'useTotal',
				rule (row, success, error) {
					if (!row.useTotal) {
						error('用量不能为0')
					} else {
						success()
					}
				}
			}]
		}
	},
	methods: {
		checkCode (row, success, error) {
			const filterCode = this.useDetails.find(d => d.materialId === row.materialId && d.$fxIndex !== row.$fxIndex)
			if (!row.materialId) {
				error('消耗品编号不能为空')
			} else if (filterCode) {
				error('消耗品不能重复')
			} else {
				success()
			}
		},
		codeRender (h, { row, $index }) {
			h = this.$createElement
			const filterKeys = ['name', 'code']
			return <fx-list-cell-select-item
				ref={`code-${$index}`}
				vModel={row.materialId}
				isEdit={row.isEdit}
				row={row}
				rowIndex={$index}
				columnProp='code'
				cellText={row.item.code}
				selectOptionList={this.filterUseInfoOptionList(row, this.itemList)}
				filterKeys={filterKeys}
				vOn:on-change={this.onCodeSelectChange}
			></fx-list-cell-select-item>
		},
		filterUseInfoOptionList (row, itemList) {
			const filterItemList = []
			itemList.map(p => {
				if (p.code === row.item.code) {
					filterItemList.push(p)
				} else {
					if (!this.hadSelected(p)) {
						filterItemList.push(p)
					}
				}
			})
			return filterItemList
		},
		hadSelected (item) {
			for (var j = 0; j < this.useDetails.length; j++) {
				const v = this.useDetails[j]
				if (v.item.code === item.code) {
					return true
				}
			}
			return false
		},
		onCodeSelectChange (item, row) {
			row.item = item
			row.itemUnitList = item.technologyMaterialUnitEntirys
			row.itemUnit = item.technologyMaterialUnitEntirys.find(item => {
				return item.unitType === 1
			}) || {}
			row.processingFlag = item.processingFlag
			row.materialName = item.name
			row.useTotal = 0
			row.rate = item.rate
			row.materialId = item.id
		},
		unitRender (h, { row, $index }) {
			h = this.$createElement
			const optionProp = {
				key: 'id',
				label: 'busUnit',
				value: 'id'
			}
			return <fx-list-cell-select
				ref={`unit-${$index}`}
				value={row.itemUnit.id}
				isEdit={row.isEdit}
				row={row}
				rowIndex={$index}
				columnProp='unit'
				cellText={row.itemUnit.busUnit}
				selectOptionList={row.itemUnitList}
				selectOtionProp={optionProp}
				vOn:on-change={this.onUnitSelectChange}
			></fx-list-cell-select>
		},
		onUnitSelectChange (item, row) {
			row.itemUnit = item
		},
		useTotalRender (h, { row, $index }) {
			h = this.$createElement
			return <fx-list-cell-input-number
				ref={`useTotal-${$index}`}
				vModel={row.useTotal}
				isEdit={row.isEdit}
				row={row}
				rowIndex={$index}
				columnProp='useTotal'
				placeholder='请输入用量'
				cellText={this.useTotalText(row)}
				pointSize='2'
				// vOn:on-change={this.onRatioChange}
			>
			</fx-list-cell-input-number>
		},
		useTotalText (row) {
			return row.useTotal || 0
		},
		onCellClick (type) {
			return (row) => {
				this.$refs.procedureUseTable.setRowEdit(row, type)
			}
		},
		fpInitAddDetailsData () {
			return new Promise(resolve => {
				resolve({
					itemUnitList: [],
					materialId: '',
					materialName: '',
					item: {},
					itemUnit: {},
					seq: this.procedureDetails.seq,
					materialUnitId: '',
					useTotal: 0,
					rate: ''
				})
			})
		},
		fpSaveDetails (detail) {
			detail.routingId = this.procedureDetails.id
			return this.onSaveDetailsHandler(detail)
		},
		onSaveDetailsHandler (params) {
			const postData = {
				id: params.id || '',
				dataType: 1,
				materialId: params.materialId,
				materialUnitId: params.itemUnit.id,
				routingId: params.routingId,
				seq: params.seq,
				useTotal: params.useTotal
			}
			return this.$fxApi('routing.routingMaterialSaveOrUpdate')({ data: postData }).then(res => {
				return Promise.resolve(res)
			})
		},
		fpDeleteDetails (ids) {
			if (ids.length > 0) {
				return this.$fxApi('routing.routingMaterialDelete')({
					data: {
						ids: ids
					}
				}).then(res => {
					return Promise.resolve(res)
				})
			}
		},
		onDetailsRefresh () {
			this.$emit('on-details-refresh')
		},
		processingFlagRender (row) {
			switch (row.processingFlag) {
			case 0:
				return '在制品'
			case 1:
				return '产品'
			case 2:
				return '原料'
			default:
				return ''
			}
		},
		checkDetailsUnSaving () {
			return this.$refs.procedureUseTable.checkDetailsUnSaving()
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
</style>
